<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
	xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
<head th:include="inc/home::header">
</head>
<link type="text/css" th:href="@{/css/content.css}" rel="stylesheet" />
	<body>
	<!--返回-->
	<div class="back"  onclick="loadPage('/userGroup')">
		<img src="images/back.png" />
	</div>
	<div class="head-top">
		<div th:include="header :: header"></div>
	</div>
		<div class="header-title">
			<span th:text="${title}">添加用户组</span>
		</div>
		<div class="spare-a">
			<div class="save-bg"><a href="#" class="spare-tj" onclick="Save()">保 存</a></div>
			<div class="spare-add">
			
				<form id="userGroupForm">

				<input type="text" readonly="readonly" style="display: none"
					name="id" /> 
				<ul>
					<li>
						<div class="spare-addl"><span class="star">*</span>用户组名称：</div>
						<div class="spare-addr">
							<input type="text" class="spare-add-input"  id="name" name="name"/>
						</div>
					</li>
					<li>
						<div class="spare-addl"><span class="star">*</span>用户名称：</div>
						<div class="spare-addr">
							<div class="user-group clearfix" th:each="user,iterStat : ${users}"  th:value="${user.id}"  >
                                  <span  th:text="${user.userName}"></span>
						          <div class="documentation-check"></div>
							</div>
							
						</div>
					</li>
					<li>
						<div class="spare-addl">备注：</div>
						<div class="spare-addr"><textarea  name="remark" class="spare-add-textarea"></textarea></div>
					</li>
				</ul>
				</form>
			</div>
		</div>
	</body>
	
<script th:inline="javascript">  
/*<![CDATA[*/  
  function verifyNull(obj){
	
		if(obj == null||obj.val()==""||obj.val()=="请选择"){
			top.$.Zebra_Dialog('<div class="prompt"><div class="warning-icon"></div><div class="success-title">输入的内容不能包含空</div></div>', {
				'title':'提示',
	 	         'buttons':['确定']
		     });
			return false;
		}
	return true;
}      
 function getData(){
	if(!verifyNull($("#name"))){
 		return false;
 	}
	return true;
 }
        
 
 function Save(){
		var validate=getData();
		  if(!validate){
			 return false;
		 }
	   var data= getDataJson("userGroupForm");
	   var user=""; 
	   	  $("div[class='user-group clearfix active']").each(function() {
	   		user=user+$(this).attr("value") + ",";
	       });
	   	  if(user!=""){
	   		data.user=user;
	   	  }else{
	  		top.$.Zebra_Dialog('<div class="prompt"><div class="warning-icon"></div><div class="success-title">输入的内容不能包含空</div></div>', {
				'title':'提示',
	 	         'buttons':['确定']
		     });
	  		return true;
	   	  }
	      
      AjaxWebTableInfo("/userGroup/saveOrUpdate",data);
	 }
	      
	function AjaxWebTableInfo(url , obj){
		 $.ajax({
		     type: "post",
		     dataType: "json",
		     url: url,
		     data:obj,
		     success: function (data, status) {
		    	 		$.Zebra_Dialog(
								'<div class="prompt"><div class="success-icon"></div><div class="success-title">保存成功</div></div>',
								{
									'title' : '提示',
									'show_close_button' : false,
									'buttons' : [ {
										caption : '确定',
										callback : function() {
										
												loadPage("/userGroup");
										
											
										}
									} ]
								});
		     },
		     error: function (data) {
		    	 $.Zebra_Dialog('<div class="prompt"><div class="error-icon"></div><div class="success-title">保存失败!</div></div>', {
			            'title':'提示',
			            'buttons':['确定']
			         });
		     }
		 });	
	}
 
//加载数据
$(function() { 
    var usergroups = [[${usergroups}]];  
    if(usergroups!=null){
        loadData(usergroups);
        var userIds=usergroups.user

   	  $("div[class='user-group clearfix']").each(function() {
   		  
   	    var ids=	userIds.split(",");
   	    
     	 for(var i=0;i<ids.length;i++){
   	
   		  if(ids[i]==$(this).attr("value")){
     			$(this).addClass("user-group clearfix active");
     		  }
   		}
   		  
	    });
    }
});
    
/*]]>*/  
</script>
</html>
